<template>
  <div class="app-container">
    <div align="right">
      <el-button type="success" @click="addArticle">添加文章</el-button>
    </div>
    <el-table
      :data="list" element-loading-text="Loading" border fit highlight-current-row
    >
     <el-table-column align="center" label="文章ID" >
        <template slot-scope="scope">
          {{ scope.row.articleId }}
        </template>
      </el-table-column>

      <el-table-column label="文章名称">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>

      <el-table-column label="文章类型">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>


      <el-table-column label="作者" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.author }}
        </template>
      </el-table-column>

      <el-table-column label="点赞数量">
        <template slot-scope="scope">
          {{ scope.row.likesNum }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>

      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="editArticle(scope.row.articleId)">
            {{ $t('common.update') }}
          </el-button>
          <el-button type="danger" size="mini" @click="delArticle(scope.row.articleId)">
            {{ $t('common.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- ----------------------------------分页 -->
  <div class="block" style="float:right ;margin-top: 20px;">
    <!-- <span class="demonstration">显示总数</span> -->
        <el-pagination
          background
          @current-change="fetchData"
          :current-page.sync="page_num"
          :page-size="page_size"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
  </div>
<!-- --------------------------------------- -->
  </div>
</template>
<script>
import healarticle from '@/api/healthyarticle'
export default {
  data() {
    return {
       list: [],//列表条件封装对象
      page_num: 1,
      page_size: 8,//每8个数据一页
      total: 1,//初始化
    }
  },
    //在页面渲染前执行
  //调用methods定义的方法，得到数据
  created() {
    this.fetchData()
  },
  methods: {
    //添加文章
    addArticle(){
      this.$router.push("/HealthyArticle/addarticle")
    },
    //编辑文章
    editArticle(articleId){
      this.$router.push("/HealthyArticle/editarticle/"+articleId)
    },
    //页面列表页渲染，请求接口调用
    fetchData(page=1) {
      this.page_num=page
      var vm=this;
      healarticle.getHealthyarticleList(this.page_num,this.page_size)
    //请求成功调用
     .then(function(res)
     {
       vm.list=res.data.articles;
       vm.list=res.data.total;
     });
    },
    // 删除方法------------------
    delArticle(articleId){
      var vm=this;
      this.axios({
        method:'DELETE',
        url:'http://172.21.136.71:8080/HealthyArticle?articleId='+articleId,
        headers:{
          'Authorization':'eyJKV1QiOiJKV1QiLCJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6NiwiaWF0IjoxNjQ0Mzk2NjkwLCJqdGkiOiJlZGJlYzE1Mzg5ZmQ0YmFhOThjYTg5ODIwYzMxOTBmNCJ9.yUp8dY-2pY4WB7zjnpWKHFZfHHc8e9neT5XuuzQ0_tg'
        }
      }).then(function(res)
      {
        /* vm.list=resp.data */
        /* console.log(resp)
        consloe.log(response.headers); */
        if(res.data.errorCode==0){
          //弹幕
          vm.$message({
            message:'删除成功',
            type:'success'
          });
          vm.fetchData();//更新商品列表
        }
        else{
          vm.$message({
            message:'删除失败',
            type:'error'
          });
        }
       }); //.catch(function(error){
      //   vm.$message.error('删除失败');
      // }) ;
    }
  }
}
</script>
